/**
 * 响应式工具类
 * 提供设备类型检测和响应式布局支持
 */

export interface DeviceInfo {
  isMobile: boolean
  isTablet: boolean
  isDesktop: boolean
  screenWidth: number
  screenHeight: number
  pixelRatio: number
  platform: string
}

export class ResponsiveUtil {
  private static instance: ResponsiveUtil
  private deviceInfo: DeviceInfo

  private constructor() {
    this.deviceInfo = this.detectDevice()
  }

  /**
   * 获取单例实例
   */
  public static getInstance(): ResponsiveUtil {
    if (!ResponsiveUtil.instance) {
      ResponsiveUtil.instance = new ResponsiveUtil()
    }
    return ResponsiveUtil.instance
  }

  /**
   * 检测设备类型
   */
  private detectDevice(): DeviceInfo {
    const systemInfo = uni.getSystemInfoSync()
    
    const screenWidth = systemInfo.screenWidth
    const screenHeight = systemInfo.screenHeight
    const pixelRatio = systemInfo.pixelRatio
    const platform = systemInfo.platform

    // 设备类型判断标准
    const isMobile = screenWidth <= 768
    const isTablet = screenWidth > 768 && screenWidth <= 1024
    const isDesktop = screenWidth > 1024

    return {
      isMobile,
      isTablet,
      isDesktop,
      screenWidth,
      screenHeight,
      pixelRatio,
      platform
    }
  }

  /**
   * 获取设备信息
   */
  public getDeviceInfo(): DeviceInfo {
    return this.deviceInfo
  }

  /**
   * 是否为移动端
   */
  public isMobile(): boolean {
    return this.deviceInfo.isMobile
  }

  /**
   * 是否为平板
   */
  public isTablet(): boolean {
    return this.deviceInfo.isTablet
  }

  /**
   * 是否为桌面端
   */
  public isDesktop(): boolean {
    return this.deviceInfo.isDesktop
  }

  /**
   * 根据设备类型执行不同逻辑
   */
  public executeByDevice<T>(
    mobileFn: () => T,
    tabletFn?: () => T,
    desktopFn?: () => T
  ): T {
    if (this.isMobile()) {
      return mobileFn()
    } else if (this.isTablet() && tabletFn) {
      return tabletFn()
    } else if (desktopFn) {
      return desktopFn()
    }
    
    // 默认返回移动端逻辑
    return mobileFn()
  }

  /**
   * 监听窗口大小变化
   */
  public onResize(callback: (deviceInfo: DeviceInfo) => void) {
    uni.onWindowResize(() => {
      this.deviceInfo = this.detectDevice()
      callback(this.deviceInfo)
    })
  }

  /**
   * 移除窗口大小变化监听
   */
  public offResize() {
    uni.offWindowResize()
  }

  /**
   * 获取响应式布局配置
   */
  public getResponsiveConfig() {
    const { isMobile, isTablet, isDesktop } = this.deviceInfo

    return {
      gridColumns: isMobile ? 1 : isTablet ? 2 : 3,
      cardPadding: isMobile ? '20rpx' : isTablet ? '30rpx' : '40rpx',
      fontSize: {
        small: isMobile ? '24rpx' : '28rpx',
        medium: isMobile ? '28rpx' : '32rpx',
        large: isMobile ? '32rpx' : '36rpx'
      },
      spacing: {
        small: isMobile ? '10rpx' : '20rpx',
        medium: isMobile ? '20rpx' : '30rpx',
        large: isMobile ? '30rpx' : '40rpx'
      }
    }
  }

  /**
   * 计算响应式图表尺寸
   */
  public getChartSize(containerWidth?: number) {
    const { isMobile, isTablet } = this.deviceInfo
    const width = containerWidth || this.deviceInfo.screenWidth

    return {
      width: width - (isMobile ? 40 : isTablet ? 60 : 80),
      height: isMobile ? 300 : isTablet ? 400 : 500,
      padding: isMobile ? 20 : isTablet ? 30 : 40
    }
  }

  /**
   * 获取响应式表格配置
   */
  public getTableConfig() {
    const { isMobile } = this.deviceInfo

    return {
      pageSize: isMobile ? 10 : 20,
      showPagination: !isMobile,
      enableScroll: isMobile,
      columnWidth: isMobile ? 'auto' : 150
    }
  }
}

/**
 * 响应式Hook（用于Composition API）
 */
export function useResponsive() {
  const responsive = ResponsiveUtil.getInstance()
  
  return {
    deviceInfo: responsive.getDeviceInfo(),
    isMobile: responsive.isMobile(),
    isTablet: responsive.isTablet(),
    isDesktop: responsive.isDesktop(),
    executeByDevice: responsive.executeByDevice.bind(responsive),
    onResize: responsive.onResize.bind(responsive),
    offResize: responsive.offResize.bind(responsive),
    getResponsiveConfig: responsive.getResponsiveConfig.bind(responsive),
    getChartSize: responsive.getChartSize.bind(responsive),
    getTableConfig: responsive.getTableConfig.bind(responsive)
  }
}

/**
 * 响应式指令（用于模板中使用）
 */
export const responsiveDirective = {
  mounted(el: any, binding: any) {
    const responsive = ResponsiveUtil.getInstance()
    const { arg, value } = binding
    
    if (arg === 'class') {
      const classes = responsive.executeByDevice(
        () => value.mobile || '',
        () => value.tablet || value.mobile || '',
        () => value.desktop || value.tablet || value.mobile || ''
      )
      
      if (classes) {
        el.className = `${el.className} ${classes}`
      }
    }
  }
}

// 导出工具实例
export const responsiveUtil = ResponsiveUtil.getInstance()